<template>
  <div class="m-content dailyDirectPassRate">
    <ul class="progress-box">
      <li v-for="c in list" :key="c.title">
        <el-progress type="circle" :width="c.width || 120" :stroke-width="c.strokeWidth || 12" stroke-linecap="butt" :color="colors" :percentage="c.value">
          <template #default="{ percentage }">
            <span class="percentage-value">{{ Number(percentage).toFixed(2) }}%</span>
          </template>
        </el-progress>

        <div class="title">{{ c.title }}</div>
      </li>
    </ul>
    
  </div>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'

// props
const props = defineProps({
  data: {
    type: Array,
    default: () => { return [] }
  }
})

// 常量
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]

// 变量
const list = ref([
  { title: "AOI", width: 134, strokeWidth: 28, value: 0 },
  { title: "SPI", width: 134, strokeWidth: 28, value: 0 },
])

// watch监听
watch(
  () => props.data,
  (n) => {
    list.value.forEach(r => {
      const opt = n.find(_r => _r.TYPE === r.title)
      r.value = opt? (opt.RATE*100).toFixed(2)*1 : 0
    })
  }
)


function init() {}
onMounted(() => {
  init()
})

// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.dailyDirectPassRate {
  height: 100%;
  overflow: auto;
  ul.progress-box {
    height: 100%;
    display: flex;
    align-items: center;
    li {
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-progress {
        .el-progress__text {
          span {
            font-size: 20px;
            color: #FFF;
          }
        }
      }
      .title {
        font-size: 24px;
        padding-top: 5px;
      }
    }
  }
}
</style>
